<template>
	<view class="container">
		<view class="check-content">
			<view class="check-mainTitle">{{getStateName(state)}}</view>
			<view class="check-miniTitle">提交时间:{{createdTime}}</view>
		</view>

		<view class="popup-content">
			<view class="comm_line_content">
				<view class="popup-content_title">姓名</view>
				<input type="text" disabled="true" maxlength="20" placeholder-style="color:#BBBDC6" placeholder="请输入姓名"
					v-model="name" />
			</view>

			<view class="comm_line_content">
				<view class="popup-content_title">手机号</view>
				<input type="number" disabled="true" maxlength="11" placeholder-style="color:#BBBDC6"
					placeholder="请输入手机号" v-model="mobileMask" />
			</view>

			<view class="comm_line_content">
				<view class="popup-content_title">身份证号</view>
				<input type="idcard" disabled="true" maxlength="18" placeholder-style="color:#BBBDC6"
					placeholder="请输入身份证号" v-model="certNoMask" />
			</view>

			<view class="comm_line_content">
				<view class="popup-content_title">工作单位</view>
				<input type="workPlace" disabled="true" placeholder-style="color:#BBBDC6" placeholder="请输入单位名称(选填)"
					v-model="workplaces" />
			</view>

			<view class="comm_line_content">
				<view class="popup-content_title">房东信息</view>
				<input type="text" disabled="true" placeholder-style="color:#BBBDC6" placeholder="请输入房东手机号码"
					v-model="ownerInfo" />
			</view>

			<view v-if="state == 1">
				<view class="comm_line_content">
					<view class="popup-content_title">房间</view>
					<input type="text" disabled="true" v-model="lockName" />
				</view>
				<view class="comm_line_content">
					<view class="popup-content_title">开始时间</view>
					<input type="text" disabled="true" v-model="startTime" />
				</view>

				<view class="comm_line_content">
					<view class="popup-content_title">结束时间</view>
					<input type="text" disabled="true" v-model="endTime" />
				</view>
			</view>

		</view>

		<view v-if="state == 0 && roleType==2" class="popup_foot">
			<van-button class="popup_foot_buttonB" type="default" @click="goDel()" block>删除</van-button>
			<van-button class="popup_foot_buttonA" type="info" @click="goEdit()" block>编辑</van-button>
		</view>
		<!-- state == 0 && -->
		<view v-if="state == 0 && roleType==1" class="popup_foot">
			<van-button class="popup_foot_buttonA" type="default" @click="check(1)" block
				style="width: 40%;">拒绝</van-button>
			<van-button type="info" @click="check(2)" block style="width: 40%;">通过</van-button>
		</view>

		<view v-if="state == 1 && roleType==1" class="popup_foot">
			<!-- <button class="popup_foot_buttonA" @click="goAllocateLock()">分配房间</button> -->
			<van-button class="popup_foot_buttonA" type="info" @click="goAllocateLock()" block
				style="width: 90%;">分配房间</van-button>
		</view>
		<!-- 删除提交信息 -->
		<uni-popup ref="alertDialog" type="dialog" :maskClick='false'>
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="确认删除吗？" content="删除后，该信息将从列表中移除。"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>

</template>

<script>
	import {
		getTenantDetailById,
		delTenantById,
		verificationInfo
	} from '@/api/userInfo.js'
	import {
		getLockList
	} from '@/api/allocateLock.js';
	import Util from '@/utils/util.js';
	export default {
		name: 'detailInfo',
		data() {
			return {
				id: '',
				state: 1, //0：待核验，1：核验通过，2：核验失败
				createdTime: '',
				name: '',
				mobile: '',
				certNo: '',
				ownerNo: '',
				ownerName: '',
				roomName: '',
				lockName: '',
				startTime: '',
				endTime: '',
				workplaces: '',
				ownerInfo: '',
				roleType: this.$userInfo.roleType,
				userId: this.$userInfo.userId,
				mobileMask: '',
				certNoMask: '',
				landlordMobile:'',
			}
		},
		onLoad(options) {
			console.log(options.id);
			this.id = options.id;
			if (this.id !== '' && this.id !== undefined) {
				this.getTenantDetailById()
			};
		},
		methods: {
			async getTenantDetailById() {
				let params = {};
				params.id = this.id;
				try {
					let res = await getTenantDetailById(params);
					console.log('调用接口后：', res)
					if (res.statecode == '0') {
						let data = res.data;
						this.state = data.state;
						this.createdTime = data.createdTime;
						this.name = data.name;
						this.mobile = data.mobile;
						this.certNo = data.certNo;
						this.ownerNo = data.ownerNo;
						this.ownerName = data.ownerName;
						this.roomName = data.roomName;
						this.lockName = data.lockName;
						this.startTime = data.startTime;
						this.endTime = data.endTime;
						this.workplaces = data.workplaces;
						this.landlordMobile = data.landlordMobile;
						this.landlordMobileMask = data.landlordMobile ? data.landlordMobile.replace(/^(1[3-9][0-9])\d{4}(\d{4}$)/,"\$1******\$2") : "";
						// this.ownerInfo = this.ownerName + "(" + this.ownerNo + ")";
						this.ownerInfo = this.ownerName + "(" + this.landlordMobileMask + ")";
						this.mobileMask = data.mobile ? data.mobile.replace(/^(1[3-9][0-9])\d{4}(\d{4}$)/,"\$1******\$2") : "";
						this.certNoMask = data.certNo ? data.certNo.replace(/^(.{6})(?:\w+)(.{4})$/,"\$1********\$2") : "";
					} else {
						Util.toast(res.statemsg);
					}
				} catch (err) {
					console.log("err:", err)
				}
			},
			getStateName(state) {
				let ret = "";
				if (state == 0) {
					ret = "待核验"
				} else if (state == 1) {
					ret = "核验通过"
				} else if (state == 2) {
					ret = "核验失败"
				}
				return ret
			},
			goEdit() {
				let url = '/pages/tenants/userInfo/userInfo' + '?id=' + this.id;
				uni.navigateTo({
					url: url
				})
			},
			async check(flag) {
				const ownerExamine = flag == 1 ? false : true
				const param = {
					id: this.id,
					ownerExamine
				}
				const res = await verificationInfo(param);
				if (res.statecode == '0') {
					if (flag == 2) { // 点的是通过按钮
						const data = res.data;
						if (data + '' == 'false') {
							this.state = 2; // 核验失败
							uni.showToast({
								title: '核验不通过,请填写真实信息',
								icon: "none",
								mask: true,
							})
							return;
						}
						this.state = 1; // 核验通过
						await this.setLockList();
						uni.navigateTo({ // 分配门锁
							url: '/pages/landlord/allocateLock/allocateLock?tenantId=' + this.id
						})
					} else {
						uni.navigateBack();
					}
				} else {
					Util.toast(res.statemsg);
				}
			},
			async goAllocateLock() {
				await this.setLockList();
				uni.navigateTo({ // 分配门锁
					url: '/pages/landlord/allocateLock/allocateLock?tenantId=' + this.id
				})
			},
			// 删除确认
			async dialogConfirm() {
				// 删除【TODO】
				let params = {};
				params.id = this.id;
				try {
					let res = await delTenantById(params);
					console.log('调用接口后：', res)
					if (res && res.statecode == '0') {
						uni.showToast({
							title: "删除成功",
							icon: "none",
							mask: true,
							duration: 1500,
							success: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/tenants/commitList/commitList'
									})
								}, 1500);
							}
						})
					} else {
						uni.showToast({
							title: res.statemsg,
							icon: "none",
							mask: true,
						})
					}
				} catch (err) {
					console.log("err:", err)
				}
			},
			// 删除取消
			dialogClose() {
				// console.log('点击关闭') 
			},

			//删除
			goDel() {
				this.$refs.alertDialog.open()
			},
			setLockList() {
				return new Promise(async (resolve, reject) => {
					// 获取当前管理员的门锁列表
					const lockResp = await getLockList({
						ownerId: this.userId
					});
					if (lockResp.statecode != '0') {
						// Util.toast(lockResp.statemsg);
						reject(lockResp.statemsg)
						return;
					}
					const list = [];
					lockResp.data.forEach((item) => {
						list.push({
							value: item.lockId,
							text: item.lockName
						})
					})
					this.$store.commit('setLockList', list);
					resolve();
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #F8F8FA;
		display: flex;
		flex-direction: column;

		.popup-content {
			background-color: white;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;

			// flex: 1;
			.comm_line_content {
				height: 100rpx;
				display: flex;
				// font-weight: bold;
				color: #1F2642;
				line-height: 100rpx;

				.popup-content_title {
					height: 100rpx;
					line-height: 100rpx;
				}

				input {
					font-weight: normal;
					text-align: right;
					flex: 1;
					line-height: 100rpx;
					height: 100rpx;
					// background-color: #F8F8FA;
				}

				::v-deep.uni-easyinput {
					// background-color: red;
				}
			}

			.copy_lay {
				position: relative;
			}

			.clear_text {
				position: absolute;
				right: 180rpx;
				bottom: 28rpx;
				color: #9193A1;
				text-align: center;
				font-size: 24rpx;
				line-height: 50rpx;
			}

			.commit_text {
				position: absolute;
				right: 24rpx;
				bottom: 28rpx;
				width: 108rpx;
				text-align: center;
				height: 50rpx;
				background: linear-gradient(90deg, #3F91FF 0%, #217DF9 100%);
				border-radius: 6rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 50rpx;
			}

			.popup-content_title {
				color: #1F2642;
				font-size: 36rpx;
			}
		}

		.popup_foot {
			height: 88rpx;
			margin-top: 60px;
			display: flex;
			justify-content: space-around;

			.popup_foot_buttonB {
				color: #ffffff;
			}
		}

		.check-content {
			height: 170rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;

			.check-mainTitle {
				font-size: 40rpx;
				font-weight: 500;
				color: #1F2642;
				line-height: 100rpx;
			}

			.check-miniTitle {
				font-size: 28rpx;
				font-weight: 400;
				color: #8F92A0;
			}
		}
	}
</style>